<!-- 账单详情 -->
<template>
	<view class="container">
		<view class="cut"></view>
		<view class="header">
			<image v-if="data.type == 'extract'&& data.status !== -1" src="../../../static/images/center/yue.png" mode=""></image>
			<image v-if="data.type == 'extract'&& data.status == -1" src="../../../static/images/public/failIcon.png" mode=""></image>
			<image v-if="[
				'pay_product_refund',
				'recharge',
				'vip_pay',
				'pay_product',
				'pay_take_delivery',
				'offline_pay',
				'pay',
				'cash_pay',
				'pay_service_card',
				'online_take_delivery_pay',
				'take_delivery_point'
				].includes(data.type)"
			 src="../../../static/images/center/yue.png" mode=""></image>
			<image v-if="[
				'online_black_shell_deduction',
				'online_yellow_shell_deduction',
				'online_red_shell_deduction',
				'online_blue_shell_deduction',
				'receive',
				'gift',
				'online_yellow_shell_replacement',
				'online_red_shell_replacement',
				'online_blue_shell_replacement',
				'exchange',
				'shell_deduction',
				'shell_deduction_vip',
				'online_payment_acquisition',
				'recycle'
				].includes(data.type)"
			 src="../../../static/images/center/adsf.png" mode=""></image>
			<image v-if="['online_pay','deduction','consumption_acquisition','seller_consumption_acquisition','friend_give'].includes(data.type)" src="../../../static/images/center/dfdsf.png" mode=""></image>
			<image v-if="data.type == 'system_add'&&data.category == 'now_money'" src="../../../static/images/center/yue.png"
			 mode=""></image>
			<image v-if="data.type == 'system_add'&&data.category == 'shell'" src="../../../static/images/center/adsf.png" mode=""></image>
			<image v-if="data.type == 'promotion'" src="../../../static/images/center/dsfds.png" mode=""></image>
			<text class="orderType" v-if="data.type == 'friend_give'">领取好友赠送积分</text>
			<text class="orderType" v-if="data.type == 'seller_consumption_acquisition'">商户经营获得积分</text>
			<text class="orderType" v-if="data.type == 'consumption_acquisition'">消费获得积分</text>
			<text class="orderType" v-if="data.type == 'online_take_delivery_pay'">现金支付-线上提货</text>
			<text class="orderType" v-if="data.type == 'vip_pay'&&data.category=='now_money'">余额抵扣-购买VIP</text>
			<text class="orderType" v-if="data.type == 'vip_pay'&&data.category=='vip'">购买VIP</text>
			<text class="orderType" v-if="data.type == 'pay_take_delivery'">余额抵扣-购买提货卡</text>
			<text class="orderType" v-if="data.type == 'take_delivery_point'">余额抵扣-线上提货</text>
			<text class="orderType" v-if="data.type == 'pay'">购买提货卡</text>
			<text class="orderType" v-if="data.type == 'cash_pay'">购买服务卡</text>
			<text class="orderType" v-if="data.type == 'pay_service_card'">余额抵扣-购买服务卡</text>
			<text class="orderType" v-if="data.type == 'pay_product'">余额抵扣-线下支付</text>
			<text class="orderType" v-if="data.type == 'deduction'">余额抵扣-线上消费</text>
			<text class="orderType" v-if="['online_black_shell_deduction','online_yellow_shell_deduction','online_red_shell_deduction','online_blue_shell_deduction'].includes(data.type)">{{data.shell_name}}抵扣-线上消费</text>
			<text class="orderType" v-if="data.type == 'shell_deduction'">{{data.shell_name}}抵扣-线下消费</text>
			<text class="orderType" v-if="data.type == 'shell_deduction_vip'">{{data.shell_name}}抵扣-购买VIP</text>
			<text class="orderType" v-if="data.type == 'extract'&& data.status == -1">提现失败</text>
			<text class="orderType" v-if="data.type == 'extract'&& data.status !== -1">提现到-{{data.bank_name}}</text>
			<text class="orderType" v-if="data.type == 'exchange'">{{data.shell_name}}-兑换-{{data.to_shell_name}}</text>
			<text class="orderType" v-if="data.type == 'online_pay'">商城购物</text>
			<text class="orderType" v-if="data.type == 'offline_payment_acquisition'">线下消费获得黑贝壳</text>
			<text class="orderType" v-if="data.type == 'online_payment_acquisition' && data.category == 'shell'">线上消费获得黑贝壳</text>
			<text class="orderType" v-if="data.type == 'pay_product_refund'">退货退款</text>
			<text class="orderType" v-if="data.type == 'offline_pay'">扫码付款给-{{data.seller_name}}</text>
			<text class="orderType" v-if="data.type == 'recharge'">余额充值</text>
			<text class="orderType" v-if="data.type == 'system_add'&&data.category == 'now_money'">系统发放余额</text>
			<text class="orderType" v-if="data.type == 'system_add'&&data.category == 'shell'">系统发放黑贝壳</text>
			<text class="orderType" v-if="data.type == 'gift'">赠送给-{{data.phone}}</text>
			<text class="orderType" v-if="data.type == 'receive'">收到-{{data.phone}}</text>
			<text class="orderType" v-if="data.type == 'promotion'">团队人员消费获得-微信昵称</text>
			<text class="orderType" v-if="['online_yellow_shell_replacement','online_red_shell_replacement','online_blue_shell_replacement'].includes(data.type)">{{data.shell_name}}置换商品</text>
			<text class="orderType" v-if="['recycle'].includes(data.type)">{{data.shell_name}}收购</text>

			<text class="money">{{data.em}}{{data.number}}</text>
		</view>
		<view class="step" v-if="data.type == 'extract'&& data.status !== -1">
			<text class="stepTitle">当前进度</text>
			<uni-steps class="stepPro" :options="stepData" active-color="#57BE6A" :active="data.status + 1" direction="column" />
		</view>
		<view class="step" v-if="data.type == 'extract'&& data.status == -1">
			<text class="stepTitle" style="min-width: 220rpx;color: red;">失败原因</text>
			<text style="color: red;">{{data.fail_msg}}</text>
		</view>
		<!-- 获得积分 -->
		<view class="content" v-if="['consumption_acquisition','seller_consumption_acquisition','friend_give'].includes(data.type)">
			<view class="cell">
				<text class="title">交易说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 线上提货-余额抵扣 -->
		<view class="content" v-if="['take_delivery_point'].includes(data.type)">
			<view class="cell">
				<text class="title">余额抵扣</text>
				<text class="value">{{data.number}}元</text>
			</view>
			<view class="cell">
				<text class="title">交易说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 购买服务卡 -->
		<view class="content" v-if="['pay_service_card','cash_pay'].includes(data.type)">
			<view class="cell" v-if="data.type == 'pay_service_card'">
				<text class="title">余额抵扣金额</text>
				<text class="value">￥{{data.number}}</text>
			</view>
			<view class="cell" v-else>
				<text class="title">余额抵扣金额</text>
				<text class="value">￥{{data.now_money_price}}</text>
			</view>
			<view class="cell" v-if="data.type == 'pay_service_card'">
				<text class="title">现金支付</text>
				<text class="value">￥{{data.pay_price}}</text>
			</view>
			<view class="cell" v-else>
				<text class="title">现金支付</text>
				<text class="value">￥{{data.number}}</text>
			</view>
			<view class="cell">
				<text class="title">交易说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 购买VIP -->
		<view class="content" v-if="['vip_pay'].includes(data.type)">
			<view class="cell">
				<text class="title" v-if="data.shell_name">{{data.shell_name}}抵扣金额</text>
				<text class="title" v-else>贝壳抵扣金额</text>
				<text class="value">￥{{data.use_conch}}</text>
			</view>
			<view class="cell">
				<text class="title">余额抵扣金额</text>
				<text class="value">￥{{data.now_money_price}}</text>
			</view>
			<view class="cell">
				<text class="title">现金支付</text>
				<text class="value">￥{{data.pay_price}}</text>
			</view>
			<view class="cell">
				<text class="title">交易说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 提货商品邮费 -->
		<view class="content" v-if="['online_take_delivery_pay'].includes(data.type)">
			<view class="cell">
				<text class="title">现金支付</text>
				<text class="value">￥{{data.pay_price}}</text>
			</view>
			<view class="cell">
				<text class="title">交易说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 贝壳置换 -->
		<view class="content" v-if="['online_yellow_shell_replacement','online_red_shell_replacement','online_blue_shell_replacement'].includes(data.type)">
			<view class="cell">
				<text class="title">贝壳类型</text>
				<text class="value">{{data.shell_name}}</text>
			</view>
			<view class="cell">
				<text class="title">使用数量</text>
				<text class="value">{{data.number}}</text>
			</view>
			<view class="cell">
				<text class="title">交易说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 贝壳收购 -->
		<view class="content" v-if="['recycle'].includes(data.type)">
			<view class="cell">
				<text class="title">贝壳类型</text>
				<text class="value">{{data.shell_name}}</text>
			</view>
			<view class="cell">
				<text class="title">收购数量</text>
				<text class="value">{{data.number}}</text>
			</view>
			<view class="cell">
				<text class="title">交易说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 贝壳抵扣 -->
		<view class="content" v-if="['shell_deduction_vip','online_black_shell_deduction','online_yellow_shell_deduction','online_red_shell_deduction','online_blue_shell_deduction'].includes(data.type)">
			<view class="cell">
				<text class="title">贝壳类型</text>
				<text class="value">{{data.shell_name}}</text>
			</view>
			<view class="cell">
				<text class="title">使用数量</text>
				<text class="value">{{data.number}}</text>
			</view>
			<view class="cell">
				<text class="title">交易说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 购买提货卡 -->
		<view class="content" v-if="['pay_take_delivery','pay'].includes(data.type)">
			<view class="cell">
				<text class="title">提货卡类型</text>
				<text class="value">{{data.card_name}}</text>
			</view>
			<view class="cell">
				<text class="title">提货卡卡点</text>
				<text class="value">{{data.card_value}}</text>
			</view>
			<view class="cell" v-if="data.type == 'pay_take_delivery'">
				<text class="title">余额抵扣</text>
				<text class="value">￥{{data.number}}</text>
			</view>
			<view class="cell" v-else>
				<text class="title">余额抵扣</text>
				<text class="value">￥{{data.now_money_price}}</text>
			</view>
			<view class="cell">
				<text class="title">现金支付</text>
				<text class="value">￥{{data.pay_price}}</text>
			</view>
		</view>
		<!-- 线上消费 抵扣余额 -->
		<view class="content" v-if="data.type == 'deduction' && data.category == 'now_money'">
			<view class="cell">
				<text class="title">余额抵扣</text>
				<text class="value">￥{{data.number}}</text>
			</view>
			<view class="cell">
				<text class="title">支付金额</text>
				<text class="value">￥{{data.pay_price}}</text>
			</view>
			<view class="cell">
				<text class="title">交易说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 用户线上消费购物获得黑贝壳 -->
		<view class="content" v-if="data.type == 'online_payment_acquisition' && data.category == 'shell'">
			<view class="cell">
				<text class="title">贝壳类型</text>
				<text class="value">{{data.shell_name}}</text>
			</view>
			<view class="cell">
				<text class="title">贝壳数量</text>
				<text class="value">{{data.number}}</text>
			</view>
			<view class="cell" v-if="[0 , -1].includes(data.status)">
				<text class="title">入账状态</text>
				<text class="value" v-if="data.status == 0">待入帐</text>
				<text class="value" v-if="data.status ==-1">已失效</text>
			</view>
			<view class="cell">
				<text class="title">交易说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 线下支付/线上购物 -->
		<view class="content" v-if="data.type == 'online_pay'||data.type == 'offline_pay'||data.type == 'offline_payment_acquisition'||data.type == 'pay_product'||data.type == 'shell_deduction'">
			<view v-if="data.type == 'offline_pay'||data.type == 'offline_payment_acquisition'||data.type == 'pay_product'||data.type == 'shell_deduction'">
				<view class="cell">
					<text class="title">商户名称</text>
					<text class="value">{{data.seller_name}}</text>
				</view>
				<view class="cell">
					<text class="title">商户编号</text>
					<text class="value">{{data.mer_id}}</text>
				</view>
			</view>
			<view class="cell">
				<text class="title" v-if="data.shell_name">贝壳抵扣金额</text>
				<text class="title" v-else>{{data.shell_name}}抵扣金额</text>
				<text class="value">￥ {{data.use_conch || '0.00'}}</text>
			</view>
			<view class="cell">
				<text class="title">余额抵扣</text>
				<text class="value">￥ {{data.now_money_price}}</text>
			</view>
			<view class="cell">
				<text class="title">支付金额</text>
				<text class="value">￥ {{data.pay_price}}</text>
			</view>
		</view>
		<!-- 退货退款 -->
		<view class="content" v-if="data.type == 'pay_product_refund'">
			<view class="cell" v-if="data.category == 'shell'">
				<text class="title">退还{{data.shell_name}}</text>
				<text class="value">{{data.number || '0.00'}}</text>
			</view>
			<view class="cell" v-if="data.category == 'now_money'">
				<text class="title">退还余额</text>
				<text class="value">￥ {{data.number}}</text>
			</view>
			<view class="cell" v-if="data.category == 'cash'">
				<text class="title">退还金额</text>
				<text class="value">￥ {{data.number}}</text>
			</view>
		</view>
		<!-- 提现 -->
		<view class="content" v-if="data.type == 'extract'">
			<view class="cell">
				<text class="title">提现方式</text>
				<text class="value" v-if="data.category == 'now_money'">余额提现</text>
				<text class="value" v-if="data.category == 'shell'">{{data.shell_name}}提现</text>
			</view>
			<view class="cell">
				<text class="title">提现银行</text>
				<text class="value">{{data.bank_name}}</text>
			</view>
			<view class="cell" v-if="data.category == 'now_money'">
				<text class="title">提现金额</text>
				<text class="value">￥ {{data.number}}</text>
			</view>
			<view class="cell" v-if="data.category == 'shell'">
				<text class="title">提现{{data.shell_name}}数量</text>
				<text class="value">{{data.number}}</text>
			</view>
			<!-- <view class="cell" v-if="data.category != 'now_money'">
				<text class="title">手续费</text>
				<text class="value">￥ {{data.service_fee}}</text>
			</view> -->
			<view class="cell" v-if="data.category != 'now_money'">
				<text class="title">实际到账金额</text>
				<text class="value">￥ {{(Number(data.extract_price) - Number(data.service_fee)).toFixed(2)}}</text>
			</view>
		</view>
		<!-- 收到/赠送贝壳 -->
		<view class="content" v-if="data.type == 'gift'||data.type == 'receive'">
			<view class="cell">
				<text class="title">贝壳类型</text>
				<text class="value">{{data.shell_name}}</text>
			</view>
			<view class="cell" v-if="data.type == 'gift'">
				<text class="title">赠送数量</text>
				<text class="value">{{data.number}}</text>
			</view>
			<view class="cell" v-if="data.type == 'receive'">
				<text class="title">收到数量</text>
				<text class="value">{{data.number}}</text>
			</view>
			<view class="cell">
				<text class="title">对方手机号</text>
				<text class="value">{{data.phone}}</text>
			</view>
		</view>
		<!-- 贝壳兑换 -->
		<view class="content" v-if="data.type == 'exchange'">
			<view class="cell" v-if="data.em == '-'">
				<text class="title">消耗黑贝壳数量</text>
				<text class="value">{{data.number}}</text>
			</view>
			<view class="cell" v-if="data.em == '-'">
				<text class="title">获得{{data.to_shell_name}}数量</text>
				<text class="value">{{data.expire_profit}}</text>
			</view>
			<view class="cell">
				<text class="title">兑换贝壳类型</text>
				<text class="value">{{data.to_shell_name}}</text>
			</view>
		</view>
		<!-- 系统增加 -->
		<view class="content" v-if="data.type == 'system_add'">
			<view class="cell" v-if="data.category == 'shell'">
				<text class="title">发放贝壳类型</text>
				<text class="value">{{data.shell_name}}</text>
			</view>
			<view class="cell">
				<text class="title">发放数量</text>
				<text class="value">{{data.number}}</text>
			</view>
		</view>
		<!-- 成员消费 -->
		<view class="content" v-if="data.type == 'promotion'">
			<view class="cell">
				<text class="title">获得贝壳类型</text>
				<text class="value">{{data.shell_name}}</text>
			</view>
			<view class="cell">
				<text class="title">获得数量</text>
				<text class="value">{{data.number}}</text>
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="content" v-if="data.pay_price !== '0.00' && data.type == 'online_pay'||data.type == 'offline_pay'||data.type == 'offline_payment_acquisition'||data.type == 'pay_product'||data.type == 'shell_deduction'">
			<view class="cell">
				<text class="title">支付方式</text>
				<text class="value">{{data.pay_type}}</text>
			</view>
		</view>
		<!-- 充值方式 -->
		<view class="content" v-if="data.type == 'recharge'">
			<view class="cell">
				<text class="title">充值方式</text>
				<text class="value">{{data._recharge_type}}</text>
			</view>
		</view>

		<!-- 账单时间、编号 -->
		<view class="content">
			<view class="cell">
				<text class="title">交易时间</text>
				<text class="value">{{data.add_time}}</text>
			</view>
			<view class="cell">
				<text class="title">交易单号</text>
				<text v-if="!['deduction'].includes(data.type)" class="value">{{data.link_id}}</text>
				<text v-else class="value">{{data.transaction_id}}</text>
			</view>
		</view>
		<view class="content" v-if="data.type == 'online_pay'||data.type == 'offline_payment_acquisition'">
			<view class="cell">
				<text class="title">消费获得黑贝壳</text>
				<text class="value">{{data.gain_conch}}</text>
			</view>
		</view>
		<view class="content" v-if="data.type == 'offline_pay'||data.type == 'shell_deduction'||data.type == 'pay_product'">
			<view class="cell" v-if="data.shop_commission_retrun_mode == 1">
				<text class="title">消费获得黑贝壳</text>
				<text class="value">{{data.gain_conch}}</text>
			</view>
			<view class="cell" v-if="data.shop_commission_retrun_mode == 2">
				<text class="title">消费获得积分</text>
				<text class="value">{{data.gian_integral}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import {
		billDetail
	} from "@/api/user.js"
	export default {
		components: {
			uniSteps
		},
		data() {
			return {
				data: {
					number: '',
					shell_name: '',
					em: '',
					link_id: '',
					add_time: ''
				},
				active: 2,
				stepData: [{
					title: '发起提现',
					desc: '2020-05-05 22:22:22'
				}, {
					title: '处理中',
					desc: ''
				}, {
					title: '到账成功',
					desc: ''
				}],
				iconIdx: 0,
				stepDataFail: [{
					title: '发起提现',
					desc: '2020-05-05 22:22:22'
				}, {
					title: '处理中',
					desc: ''
				}, {
					title: '失败',
					desc: ''
				}]
			};
		},
		onLoad(options) {
			// status提现 0提现中 1成功 -1失败
			billDetail({
				bill_id: options.id
			}).then(res => {
				this.data = res.data
				if (res.data.type == "extract") {
					this.stepData[0].desc = res.data.add_time
				}
			})
		},
		methods: {}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;

		.cut {
			margin-left: -30rpx;
			width: 750rpx;
			height: 10rpx;
			background-color: #eee;
		}

		.header {
			height: 393rpx;
			box-sizing: border-box;
			padding: 70rpx 0 60rpx;
			border-bottom: 1rpx solid #eee;

			image {
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				background-color: $theme-color;
				margin: 0 auto 30rpx;
			}

			.orderType {
				display: block;
				text-align: center;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

			.money {
				margin-top: 30rpx;
				display: block;
				text-align: center;
				font-size: 26rpx;
				font-size: 50rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}
		}

		.step {
			padding: 40rpx 0;
			display: flex;
			border-bottom: 1rpx solid #eee;

			text {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			.stepPro {
				margin-left: 100rpx;
				margin-top: -6px;
			}
		}

		.content {
			margin-top: 30rpx;

			.cell {
				display: flex;
				line-height: 60rpx;

				.title {
					min-width: 220rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}

				.value {
					text-align: justify;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}
		}
	}
</style>
